import { ScrollView, View } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import StyleModule from "./index.module.scss";

import HeaderSearch from "@/components/HeaderSearch/index";
import Header from "@/components/Header/index";
import Footer from "@/components/Footer/index";
import { Cell, FloatingBubble, Image, Pagination } from "@taroify/core";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import GoodsTitle from "@/components/GoodsTitle/index";
import { useState } from "react";
import { requestPOST } from "@/request";
import { ArrowUp } from "@taroify/icons";
import Menu from "@/components/Menu/index";

export default function Index() {
  const dispatch = useDispatch();
  const categoryList = useSelector(
    (state: RootState) => state.category.categoryList
  );
  const businessId = useSelector(
    (state: RootState) => state.business.businessId
  );
  const isHomeShow = useSelector(
    (state: RootState) => state.business.isHomeShow
  );
  const commodityId = useSelector(
    (state: RootState) => state.business.commodityId
  );

  const [productList, setProductList] = useState<any>([]);
  const [current, setCurrent] = useState(1);
  const [count, setCount] = useState(0);

  const getProductList = (current1?: number) => {
    requestPOST("index/shopCommodityList", {
      pageNum: current1 || current,
      pageSize: 10,
      categoryId: 0,
      sortType: 0,
      commodityId: commodityId,
      businessId: businessId,
    }).then((res: any) => {
      setCount(Math.ceil(res.total / 10));
      setProductList(
        res.vos.map((item) => ({
          ...item,
          image: process.env.TARO_APP_API + item.image,
        }))
      );
    });
  };

  const handleChange = (current) => {
    setCurrent(current);
    getProductList(current);
  };

  const gotoGoodsDetail = (id) => {
    Taro.navigateTo({
      url: `/packages/goodsDetail/index?id=${id}`,
    });
  };

  useDidShow(() => {
    if (businessId) {
      getProductList();
    }
  });

  const [scrollTop, setScrollTop] = useState(0);

  const onClick = () => {
    setScrollTop(0);
    setTimeout(() => {
      setScrollTop(Math.random());
    }, 1);
  };

  const handleLink = (item) => {
    // dispatch(setBusinessInfo({ id: "", info: {} }));
    Taro.navigateTo({
      url: `/packages/productView/index?id=${item.id}`,
    });
  };

  return (
    <ScrollView
      className="taroContainer"
      enable-passive={true}
      scroll-y={true}
      scrollWithAnimation
      scrollTop={scrollTop}
    >
      <FloatingBubble
        className="taroify-floating-bubble1"
        icon={<ArrowUp />}
        onClick={onClick}
        axis="lock"
      />
      <HeaderSearch />
      <Header isHome={true} />
      {isHomeShow && businessId ? (
        <View>
          <View style={{ margin: "20px 0" }}>
            <GoodsTitle title="Products" isMore={false} />
            <View
              style={{
                padding: "14px",
                display: "flex",
                flexDirection: "column",
                gap: "10px",
              }}
            >
              {productList.map((item) => (
                <View
                  onClick={() => gotoGoodsDetail(item.id)}
                  key={item.id}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    boxShadow: "0 0 5px 0 hsla(0, 0%, 49%, 0.45)",
                  }}
                >
                  <View style={{ width: "83px" }}>
                    <Image src={item.image} width={83} height={83} />
                  </View>
                  <View
                    style={{
                      width: "100%",
                      padding: "0 10px",
                      fontSize: "14px",
                      height: "83px",
                      display: "flex",
                      flexDirection: "column",
                      justifyContent: "space-evenly",
                    }}
                  >
                    <View className={StyleModule.info}>
                      {item.commodityName}
                    </View>
                    <View
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      <View> Min.order:{item.minNum} </View>
                      <View style={{ fontSize: "16px" }}>
                        ${item.presentPrice}
                      </View>
                    </View>
                  </View>
                </View>
              ))}
            </View>
          </View>

          <View style={{ marginBlock: "20px", padding: "0 14px" }}>
            <Pagination
              current={current}
              siblingCount={1}
              count={count}
              onChange={(page) => handleChange(page)}
            >
              <Pagination.Item type="start-ellipsis" />
              <Pagination.Item type="end-ellipsis" />
            </Pagination>
          </View>
        </View>
      ) : (
        <View style={{ margin: "20px 0" }}>
          <Menu
            data={categoryList}
            isLink={true}
            handleLink={(data) => handleLink(data)}
          />
          {/* {categoryList.map((item, index) =>
            index ? (
              <Cell
                onClick={() => gotoDetail(item)}
                titleStyle={{ flex: "2" }}
                key={item.id}
                title={item.categoryName}
                isLink
              />
            ) : (
              ""
            )
          )} */}
        </View>
      )}

      <Footer />
    </ScrollView>
  );
}
